﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="demo-section">
    <div id="special-days">
        @(Html.Kendo().Calendar()
        .Name("calendar")
        .Value(DateTime.Today)
   
        .MonthTemplate("#= RenderCal(data)#")
        )
    </div>
</div>



<script>
    function RenderCal(day) {
        var date = kendo.toString(day.date, "yyyy-MM-dd");
        if (report[date]== "0") {
            return "<div class='zreport'>" + day.value + "</div>";
        }
        if (report[date] == "1") {
            return "<div class='waitFinish'>" + day.value + "</div>";
        }
        if (report[date] == "2") {
            return "<div class='hasFinish'>" + day.value + "</div>";
        } else {
            return "<div class='noSubmit'>" + day.value + "</div>";
        }
        if (COND) {
            
        }
      
    }
    var report = { "2014-12-28": "0", "2014-12-29": "1", "2014-12-30": "2" };
    
</script>

<style>
   
     .demo-section {
         height: 430px;
         width: 690px;
     }
    #special-days {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background: url('@Url.Content("~/content/web/calendar/calendar-template.jpg")') transparent no-repeat 0 bottom;
    }
    #calendar {
        margin: 20px 0 0 265px;
        width: 340px;
        text-align: center;
    }
    #calendar .k-content {
        height: 300px;
    }
    #calendar,
    #calendar .k-content,
    #calendar .k-header,
    #calendar th,
    #calendar .k-link,
    #calendar .k-state-hover,
    #calendar .k-state-selected,
    #calendar .k-state-focused {
        background: transparent;
        border-color: transparent;
        color: #000000;
        box-shadow: none;
    }
    #calendar .k-content .k-state-hover,
    #calendar .k-content .k-state-focused {
        font-size: 18px;
        font-weight: bold;
    }
    #calendar .k-state-selected, #calendar .k-state-selected.k-state-focused {
        font-size: 24px;
        font-weight: bold;
    }
    #calendar .k-content .k-link {
        padding: 0;
        min-height: 40px;
        line-height: 40px;
    }
    #calendar th {
        padding-top: 20px;
        color: #000000;
    }
    #calendar td.k-other-month .k-link {
        color: #000000;
    }
    #calendar th,
    #calendar td {
        text-align: center;
    }

    /* Template Days */
    .zreport, .hasFinish, .waitFinish ,.noSubmit{
        width: 40px;
        height: 40px;
        margin: auto;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 50%;
        line-height: 40px;
    }
    .exhibition {
        background-color: #fff;
        color: #000;
    }
    .zreport {
        background-color: #70c114;
    }
    .hasFinish {
        background-color: #00a1e8;
    }
    .waitFinish {
        background-color: #ede50d;
    }
    .noSubmit {

        background-color:#d22d2f;
    }
</style>